<template>
  <div class="container">
    <a-card class="general-card" title="查询条件">
      <a-row>
        <a-col :flex="1">
          <a-form :model="searchModel" layout="inline" label-align="right">
            <a-row>
              <a-col flex="auto">
                <a-form-item field="name" label="姓名">
                  <a-input
                    v-model="searchModel.name"
                    placeholder="请输入姓名"
                  />
                </a-form-item>
              </a-col>
              <a-col flex="auto">
                <a-form-item field="age" label="年龄">
                  <a-input v-model="searchModel.age" placeholder="请输入年龄" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 86px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="refresh">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button
              v-permission="authority.DEMO_USER_ADD"
              type="primary"
              @click="add"
            >
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :data="renderData"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
        <template #operations="{ record }">
          <a-button
            v-permission="authority.SYS_USER_EDIT"
            type="text"
            size="small"
            @click="edit(record)"
          >
            <template #icon>
              <icon-edit />
            </template>
            编辑
          </a-button>
          <a-popconfirm
            :content="`此操作将永久删除该用户(${record.username}), 是否继续?`"
            type="warning"
            @ok="del(record.id)"
          >
            <a-button
              v-permission="authority.DEMO_USER_DEL"
              type="text"
              size="small"
              status="danger"
            >
              <template #icon>
                <icon-delete />
              </template>
              删除
            </a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <UserForm
      v-model:visible="formDialogVisible"
      :form-data="formData"
      @refresh="refresh"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { getUserPage, delUserInfo } from '@/api/demo/user';
  import { Message } from '@arco-design/web-vue';
  import authority from '@/utils/authority';
  import { usePagination } from 'vue-request';
  import defaultPageOptions from '@/utils/pagination';
  import UserForm from './components/user-form.vue';

  // 初始数据
  const generateModel = () => {
    return {
      name: undefined,
      age: undefined,
    };
  };

  const searchModel = ref(generateModel());
  const formData = ref();

  const columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '姓名', dataIndex: 'name' },
    { title: '年龄', dataIndex: 'age' },
    { title: '修改时间', dataIndex: 'updateTime' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '操作', slotName: 'operations' },
  ];

  const {
    data,
    loading,
    refresh,
    changeCurrent,
    changePageSize,
    current,
    pageSize,
    total,
  } = usePagination(
    (params) => getUserPage({ ...params, ...searchModel.value }),
    {
      ...defaultPageOptions,
    }
  );

  const renderData = computed(() => data.value?.records || []);

  const pagination = computed(() => ({
    current: current.value,
    pageSize: pageSize.value,
    showTotal: true,
    showPageSize: true,
    total: total.value,
  }));

  // 弹出框标记
  const formDialogVisible = ref(false);

  const reset = () => {
    searchModel.value = generateModel();
  };
  const add = () => {
    formDialogVisible.value = true;
    formData.value = {};
  };
  const edit = (e: any) => {
    formDialogVisible.value = true;
    formData.value = { ...e };
  };
  const del = async (id: string) => {
    await delUserInfo(id).then(() => {
      Message.success('删除成功');
      refresh();
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'DemoUser',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0px 10px 0px 10px;
  }
</style>
